<template>
  <div class="home">
    <el-container>
      <el-main>
        <!-- <ArticleList :list-data="list_data"   @pager="getArticleList"></ArticleList> -->
        <ArticleScrollPage></ArticleScrollPage>
      </el-main>
      <el-aside class="home-aside" width="35%">
        <Me></Me>
        <Tags :tags="tags"></Tags>
        <CardArticle cardHeader='最热文章' icon='hot' :articles="hotArtcile"></CardArticle>
        <Archive cardHeader='文章归档' :archives="archive"></Archive>
        <CardArticle cardHeader='最新文章' icon='article' :articles="newArtcile"></CardArticle>
        <Friend :links='links'></Friend>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import ArticleScrollPage from '@/components/ArticleScrollPage'
import Tags from "@/components/card/Tags";
import Friend from "@/components/card/Friend";
import Me from "@/components/card/Me";
import Archive from "@/components/card/Archive";
import CardArticle from "@/components/card/CardArticle";

import {getHotArtices, getNewArtices, getArchive} from '@/api/article';
import {getTags} from '@/api/tag';
import {getLinkTop} from '@/api/link';

let _this = this;
export default {
  name: "Home",
  components: {
    Tags,
    Friend,
    Me,
    Archive,
    CardArticle,
    ArticleScrollPage
  },
  data() {
    return {
        hotArtcile:[],
        newArtcile:[],
        archive:[],
        tags:[],
        links:[],
        page:1,
        hot_music:[]

    };
  },
  mounted(){

  },
  created() {
    _this = this;
    this.getHotArtices()
    this.getNewArtices()
    this.getTags()
    this.getArchive()
    this.getLink()

  },
  methods:{
    getHotArtices(){
      var param = {}
      getHotArtices(param).then(res => {
          _this.hotArtcile = res.data
      }) 
    },
    getNewArtices(){
      var param = {}
      getNewArtices(param).then(res => {
          _this.newArtcile = res.data
      }) 
    },
    getArchive(){
      var param = {}
      getArchive(param).then(res => {
          _this.archive = res.data
      }) 
    },
    getTags(){
      var param = {
        limit:20
      }
      getTags(param).then(res => {
          _this.tags = res.data.list
      }) 
    },
    getLink(){
      var param = {
        limit:20
      }
      getLinkTop(param).then(res => {
          _this.links = res.data
      }) 
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.home
    display flex
    align-items center
    justify-content center
    width 65%
    .el-main
      width 65%
      //border 1px solid #cccccc
    .el-aside
      width 35%
      //border 1px solid #cccccc
      margin-top 39px
      padding 0px 10px
      .el-card:not(:first-child)
        margin-top 20px

</style>
